<template>
  <div class="container">
    <div class="header flex-xbt">
      <div class="flex-yc">
        <h2>全部文件</h2>
        <el-input placeholder="搜索" :suffix-icon="Search"></el-input>
        <el-button class="upload" type="primary">上传</el-button>
      </div>
      <div class="flex-yc">
        <el-button type="primary" plain>删除</el-button>
        <el-button type="primary" plain>下载</el-button>
        <el-button type="primary" plain>新建文件夹</el-button>
      </div>
    </div>
    <div class="breadcrumb flex-xbt">
      <breadcrumb-com></breadcrumb-com>
      <span>共235个文件</span>
    </div>
    <el-table
      :data="tableData1"
      :header-cell-style="{
        backgroundColor: '#F0F3F7',
        color: '#333',
        fontSize: '14px',
      }"
      style="width: 100%"
      row-key="id"
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :flexible="true"
    >
      <el-table-column prop="name" label="文件名">
        <template v-slot="{ row }">
          <dir :data="row" prop="name"></dir>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="大小" />
      <el-table-column prop="date" label="时间" />
    </el-table>

    <dialog-com v-model="visible" title="温馨提示">
      <div class="bind-mobile-wrap">
        <p class="p-tip">为确认是您本人操作，请进行身份验证</p>
        <span>15555555555</span>
        <sms-code-input class="sms-input" v-model="smsCode"></sms-code-input>
      </div>
      <template #footerTip>
        <p class="p-tip">
          手机号无法使用？
          <router-link to="" class="p-tip primary">请联系客服</router-link>
        </p>
      </template>
    </dialog-com>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import dir from '@/components/control/dir/index.vue'
import BreadcrumbCom from '@/pages/member/components/BreadcrumbCom.vue'
import dialogCom from '@/components/dialog/index.vue'
import smsCodeInput from '@/components/control/sms/index.vue'
import { ref } from 'vue'

const visible = ref(true)
const smsCode = ref('')

interface User {
  id: number
  date: string
  name: string
  address: string
  hasChildren?: boolean
  children?: User[]
}

const load = (
  row: User,
  treeNode: unknown,
  resolve: (date: User[]) => void,
) => {
  setTimeout(() => {
    resolve([
      {
        id: 31,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        id: 32,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])
  }, 1000)
}

const tableData: User[] = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
    children: [
      {
        id: 31,
        date: '2016-05-01',
        name: '第三方士大夫',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        id: 32,
        date: '2016-05-01',
        name: '很干净规划局',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ],
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const tableData1: User[] = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    hasChildren: true,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
  background-color: #fff;

  .header {
    margin-bottom: 24px;

    h2 {
      flex-shrink: 0;
      margin-right: 35px;
      font-size: 20px;
      color: #021429;
    }

    .upload {
      margin-left: 35px;
    }
  }

  .breadcrumb {
    span {
      font-size: 16px;
    }
  }

  .bind-mobile-wrap {
    .sms-input {
      margin-bottom: 50px;
    }

    span {
      display: inline-block;
      margin: 30px 0 8px;
      font-size: 14px;
      color: #021429;
    }
  }
}
</style>
